<template>
  <el-form ref="form" label-width="0" label-position="left" size="mini">
    <div class="print-config-title">{{ $t('数据设置') }}</div>
    <el-form-item class="mt-16">
      <l-select
        :options="textTypeOption"
        :clearable="false"
        valueKey="id"
        labelKey="name"
        v-model="myConfig.table"
      />
    </el-form-item>
    <template v-if="myConfig.table === 'learun_type_text'">
      <div class="print-config-title">
        {{ $t('文本内容') }}
      </div>
      <el-form-item class="mt-16">
        <el-input
          type="textarea"
          :rows="4"
          :placeholder="$t('please enter')"
          v-model="myConfig.content"
        />
      </el-form-item>
    </template>
    <el-form-item v-else>
      <l-select
        v-model="myConfig.field"
        valueKey="id"
        labelKey="name"
        :options="fieldOptions"
        @change="handleFieldChange"
      />
    </el-form-item>
    <el-form-item :label="$t('标题')" label-width="40px">
      <el-input
        :placeholder="$t('please enter')"
        v-model="myConfig.title"
      />
    </el-form-item>
    <el-form-item
      v-if="pageIndex == 0 && pageConfig.isHeaderShow == '1'"
      :label="$t('页眉')"
      label-width="40px"
    >
      <el-switch v-model="myConfig.isHeader" />
    </el-form-item>

    <div class="print-config-title">{{ $t('大小位置') }}</div>
    <el-row class="mt-16">
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="W" label-width="32px">
          <el-input-number
            v-model="myConfig.width"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="X" label-width="32px">
          <el-input-number
            v-model="myConfig.left"
            controls-position="right"
            :min="
              pageIndex == 0 &&
              pageConfig.isHeaderShow == '1' &&
              myConfig.isHeader
                ? -pageConfig.paddingLeft
                : 0
            "
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="H" label-width="32px">
          <el-input-number
            v-model="myConfig.height"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="Y" label-width="32px">
          <el-input-number
            v-model="myConfig.top"
            controls-position="right"
            :min="
              pageIndex == 0 &&
              pageConfig.isHeaderShow == '1' &&
              myConfig.isHeader
                ? -pageConfig.paddingTop
                : 0
            "
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="print-config-title">{{ $t('文本设置') }}</div>
    <el-form-item class="mt-16">
      <el-select :clearable="false" v-model="myConfig.fontFamily">
        <el-option
          v-for="item in fontFamilyOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span :style="{ fontFamily: item.value }">{{ item.label }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-row>
      <el-col :span="6">
        <el-form-item>
          <el-input-number
            v-model="myConfig.fontSize"
            controls-position="right"
            :min="5"
          />
        </el-form-item>
      </el-col>
      <el-col :span="17" :offset="1">
        <el-form-item>
          <l-select
            :clearable="false"
            :options="fontWeightOption"
            v-model="myConfig.fontWeight"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label-width="0px">
      <l-select
        :options="writingModeOption"
        style="width: 100%"
        v-model="myConfig.writingMode"
      />
    </el-form-item>
    <el-form-item>
      <img
        src="../../../../assets/text_spacing1.svg"
        style="margin:0 4px;vertical-align: middle;"
      />
      <el-input-number
        v-model="myConfig.letterSpacing"
        controls-position="right"
        style="width: 50px;margin-right:16px"
        :min="0"
      />

      <img
        src="../../../../assets/text_spacing2.svg"
        style="margin-right:4px;vertical-align: middle;"
      />
      <el-input-number
        v-model="myConfig.lineHeight"
        controls-position="right"
        style="width: 50px;margin-right:16px"
        :min="0"
      />
      <img
        src="../../../../assets/text_spacing3.svg"
        style="margin-right:4px;vertical-align: middle;"
      />
      <el-input-number
        v-model="myConfig.paddingBottom"
        controls-position="right"
        style="width: 50px;"
        :min="0"
      />
    </el-form-item>
    <div
      style="display: flex;justify-content: space-between;width: 200px;font-size: 12px;font-weight: bolder;"
    >
      <i
        class="learun-icon-blod"
        :style="{
          'margin-left': '8px',
          cursor: 'pointer',
          color: myConfig.fontWeight == 'bold' ? '#5E95FF' : '#999999',
        }"
        @click="fontWeightFun"
      ></i>
      <i
        class="learun-icon-italic"
        :style="{
          cursor: 'pointer',
          color: myConfig.fontStyle == 'oblique' ? '#5E95FF' : '#999999',
        }"
        @click="fontStyleFun"
      ></i>
      <i
        class="learun-icon-underline"
        :style="{
          'font-size': '14px',
          cursor: 'pointer',
          color: myConfig.textDecoration == 'underline' ? '#5E95FF' : '#999999',
        }"
        @click="textDecorationFun('underline', myConfig.textDecoration)"
      ></i>

      <img
        src="../../../../assets/A.svg"
        v-show="myConfig.textDecoration !== 'line-through'"
        style="cursor: pointer;height: 18px;"
        @click="textDecorationFun('line-through', myConfig.textDecoration)"
      />
      <img
        src="../../../../assets/AColor.svg"
        v-show="myConfig.textDecoration === 'line-through'"
        style="cursor: pointer;height: 18px;"
        @click="textDecorationFun('line-through', myConfig.textDecoration)"
      />
      <i
        class="learun-icon-align-left"
        :style="{
          'font-size': '14px',
          cursor: 'pointer',
          color: myConfig.textAlign == 'left' ? '#5E95FF' : '#999999',
        }"
        @click="textAlignFun('left')"
      ></i>
      <i
        class="learun-icon-align-center"
        :style="{
          'font-size': '14px',
          cursor: 'pointer',
          color: myConfig.textAlign == 'center' ? '#5E95FF' : '#999999',
        }"
        @click="textAlignFun('center')"
      ></i>
      <i
        class="learun-icon-align-right"
        :style="{
          'font-size': '14px',
          cursor: 'pointer',
          color: myConfig.textAlign == 'right' ? '#5E95FF' : '#999999',
        }"
        @click="textAlignFun('right')"
      ></i>
    </div>
    <div class="print-config-title mt-16">{{ $t('颜色设置') }}</div>
    <div class="mt-16 ml-8">{{ $t('透明度') }}</div>
    <el-row class="ml-8">
      <el-col :span="18">
        <el-slider size="mini" v-model="myConfig.opacity" />
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input-number
          v-model="myConfig.opacity"
          controls-position="right"
          :min="0"
          :max="100"
          size="mini"
        />
      </el-col>
    </el-row>
    <el-form-item class="ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '文本颜色', value: '1' }]"
          v-model="myConfig.isTextColor"
        />
        <l-input-color
          :notInput="true"
          v-model="myConfig.textColor"
          style="margin-left: 8px"
        />
      </div>
    </el-form-item>
    <el-form-item class="ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '背景颜色', value: '1' }]"
          v-model="myConfig.isBackgroundColor"
        />
        <l-input-color
          :notInput="true"
          v-model="myConfig.backgroundColor"
          style="margin-left: 8px"
        />
      </div>
    </el-form-item>
    <el-form-item class="ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '描边颜色', value: '1' }]"
          v-model="myConfig.isTextShadow"
        />
        <l-input-color
          :notInput="true"
          style="margin-left: 8px"
          v-model="myConfig.textShadowColor"
        />
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import fontFamily from "../../config/fontFamily";
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    dbtableList: {
      type: Array,
      default: () => [],
    },
    pageIndex: Number,
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    textTypeOption() {
      return [
        ...this.$deepClone(this.dbtableList),
        {
          id: "learun_type_text",
          name: this.$t("普通文本"),
        },
      ];
    },
    myConfig() {
      return this.config;
    },
    fieldOptions() {
      if (this.myConfig.table != "learun_type_text") {
        const table = this.dbtableList.find((t) => t.id == this.myConfig.table);
        if (table) {
          return this.$deepClone(table.children);
        }
      }

      return [];
    },
  },

  data() {
    return {
      fontFamilyOption: fontFamily,
      fontWeightOption: [
        {
          value: "lighter",
          label: this.$t("细体"),
        },
        {
          value: "normal",
          label: this.$t("正常"),
        },
        {
          value: "bold",
          label: this.$t("粗体"),
        },
      ],
      writingModeOption: [
        {
          value: "",
          label: this.$t("横向排列"),
        },
        {
          value: "vertical-rl",
          label: this.$t("竖向排列"),
        },
      ],
    };
  },
  created() {},
  methods: {
    handleFieldChange(obj) {
      if (obj) {
        this.$set(this.myConfig, "_content", obj.name);
        this.myConfig.label = obj.coment || obj.name;
      } else {
        this.$set(this.myConfig, "_content", "");
      }
    },
    fontWeightFun() {
      if (this.myConfig.fontWeight == "bold") {
        this.myConfig.fontWeight = "normal";
      } else {
        this.myConfig.fontWeight = "bold";
      }
    },
    fontStyleFun() {
      if (this.myConfig.fontStyle == "oblique") {
        this.myConfig.fontStyle = "";
      } else {
        this.myConfig.fontStyle = "oblique";
      }
    },
    textDecorationFun(type, val) {
      if (type === val) {
        this.myConfig.textDecoration = "none";
      } else {
        if (type === "underline") {
          this.myConfig.textDecoration = "underline";
        }
        if (type === "line-through") {
          this.myConfig.textDecoration = "line-through";
        }
      }
    },
    textAlignFun(type) {
      this.myConfig.textAlign = type;
    },
  },
};
</script>
